<template>
	<view>
		<u-number-box v-show="_num > 0" :value="_num" integer min="0" :disabled="disabled" color="#033787" async-change
			@change="change">
			<view slot="minus" class="btn">-</view>
			<view slot="plus" class="btn">+</view>
		</u-number-box>
		<view v-show="_num == 0" @click="change(1)">
			<view v-if="type == 'text'" class="add">{{$t('buy-car.add')}}</view>
			<view v-else class="btn">+</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			num: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'text'
			}
		},
		data() {
			return {
				disabled: false,
				_num: 0
			}
		},
		watch: {
			num: {
				handler(val) {
					this._num = val
				},
				immediate: true
			}
		},
		methods: {
			change(val) {
				if (typeof val == 'object') {
					val = val.value
				}
				if (this.disabled) {
					return
				}
				this.disabled = true
				if (val > this._num) {
					console.log('add')
				} else {
					console.log('sub')
				}
				console.log(val, this._num)
				this._num = val
				this.disabled = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.add {
		width: 142rpx;
		height: 56rpx;
		background: #033787;
		border-radius: 8rpx;
		font-size: 22rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.btn {
		width: 44rpx;
		height: 44rpx;
		border-radius: 4rpx;
		background: #033787;
		color: #fff;
		display: flex;
		justify-content: center;
		line-height: 40rpx;
	}
</style>